<template>
  <div class="code">
    <q-form
      @submit="login"
    >
      <q-input rounded filled dense autofocus v-model="phone" label="手机号" lazy-rules mask="###########"
               :rules="[val => val && val.length > 0 || '请填写手机号',
                      val => /^1[3456789]\d{9}$/.test(val) || '请填写正确的手机号']" ref="phoneInput">
        <template v-slot:prepend>
          <q-icon name="iconfont icontubiao-1" style="color:#333;font-size: 18px" />
        </template>
      </q-input>
      <q-input rounded filled dense v-model="code" label="验证码" lazy-rules bottom-slots
               ref="codeInput" maxlength="6"
               :rules="[val => val !== null && val !== '' || '请填写验证码']">
        <template v-slot:prepend>
          <q-icon name="iconfont icontubiao-51" style="color:#333;font-size: 18px" />
        </template>
        <template v-slot:append>
          <q-btn @click.stop="sendCode" dense flat :label="getCodeBtn" :disable="codeBtnDisable" color="primary"/>
        </template>
      </q-input>
      <div>
        <q-btn dense unelevated label="登录" class="full-width login-btn" type="submit" color="primary"/>
      </div>
      <div class="link">
        <router-link to="/login/password" class="text-grey-10 link-txt">返回</router-link>
      </div>
    </q-form>
  </div>
</template>

<script>
import { saveToken, saveRefreshToken } from 'yz-help'
import { mapMutations } from 'vuex'
import { sendCode, codeLogin } from 'src/boot/login/login'
export default {
  name: 'code',
  data () {
    return {
      // 手机号
      phone: null,
      // 验证码
      code: null,
      getCodeBtn: '获取验证码', // 获取验证码按钮文字
      codeBtnDisable: false // 获取验证码按钮是否可点击
    }
  },
  created () {
    // if (!this.$route.query.phone) {
    //   this.$q.dialog({
    //     title: '请先在登录页输入手机号'
    //     // message: '请先在登录页输入手机号'
    //   }).onOk(() => {
    //     this.$router.push('/login/password')
    //   })
    // } else {
    //   this.phone = this.$route.query.phone
    // }
  },
  methods: {
    // 验证码登录
    login () {
      let params = {
        phone: this.phone,
        code: this.code
      }
      codeLogin(params).then(res => {
        const token = res.data.token_type + ' ' + res.data.access_token
        const refreshToken = 'Bearer ' + res.data.refresh_token
        saveToken(token)
        saveRefreshToken(refreshToken)
        this.setToken(token)
        this.setRefreshToken(refreshToken)
        this.$router.push('/main/home')
      })
    },
    // 发送验证码
    sendCode () {
      if (!(this.phone && this.phone.length > 0 && /^1[3456789]\d{9}$/.test(this.phone))) {
        this.$refs.phoneInput.focus()
        this.$refs.codeInput.resetValidation()
        this.phoneValid = false
        return false
      }
      this.phoneValid = true
      sendCode(this.phone).then(res => {
        this.setCodeBtn(60)
        this.$q.dialog({
          title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i> 发送验证码成功</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
      })
    },
    // 获取验证码按钮的倒计时
    setCodeBtn (num) {
      this.codeBtnDisable = true
      setTimeout(() => {
        if (num > 0) {
          this.getCodeBtn = `${num}秒后重新发送`
          this.setCodeBtn(num - 1)
        } else {
          this.getCodeBtn = '获取验证码'
          this.codeBtnDisable = false
        }
      }, 1000)
    },
    ...mapMutations({
      'setToken': 'SET_TOKEN',
      'setRefreshToken': 'SET_REFRESHTOKEN'
    })
  }
}
</script>

<style scoped lang="stylus">
</style>
